<!-- eslint-disable vue/no-mutating-props -->
<template>
  <div>
    <el-dialog
      class="dia-style"
      :title="title"
      :visible.sync="isOpen"
      width="60%"

      :close-on-click-modal="false"
    >
      <div>
        <el-row>
          <el-col :span="24">
            <div class="tips">基础信息</div>
          </el-col>
        </el-row>

        <el-form
          ref="form"
          :model="formData"
          :rules="rules"
          label-width="100px"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="数据源名称" prop="name">
                <el-input
                  v-model="formData.name"
                  placeholder="请输入数据源名称"
                  maxlength="255"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="主题名" prop="topic">
                <el-input v-model="formData.topic" placeholder="请输入topic" maxlength="255" />
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <div class="tips">配置信息</div>
            </el-col>

            <el-col :span="12">
              <el-form-item label="服务IP" prop="ip">
                <el-input v-model="formData.ip" placeholder="请输入kafka服务IP" maxlength="255" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="服务端口" prop="port">
                <el-input v-model="formData.port" placeholder="请输入服务端口" maxlength="255" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="Kafka用户名" prop="username">
                <el-input
                  v-model="formData.username"
                  placeholder="请输入Kafka用户名"
                  maxlength="255"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="Kafka密码" prop="password">
                <el-input
                  v-model="formData.password"
                  maxlength="255"
                  type="password"
                  placeholder="请输入Kafka密码"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addSource, updateSource } from '@/api/milkyway/repositorypage'
export default {
  props: {
    title: {
      type: String,
      default() {
        return '编辑'
      }
    },
    formData: {
      type: Object,
      default() {
        return {}
      }
    },
    open: {
      type: Boolean,
      default() {
        return false
      }
    },
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isOpen: this.open,

      // 表单参数
      rules: {
        name: [
          { required: true, message: '数据源名称不能为空', trigger: 'blur' }
        ],
        topic: [{ required: true, message: '主题名不能为空', trigger: 'blur' }],
        ip: [
          { required: true, message: 'ip不能为空', trigger: 'blur' },
          {
            pattern:
              /^(?:(?:1[0-9][0-9]\.)|(?:2[0-4][0-9]\.)|(?:25[0-5]\.)|(?:[1-9][0-9]\.)|(?:[0-9]\.)){3}(?:(?:1[0-9][0-9])|(?:2[0-4][0-9])|(?:25[0-5])|(?:[1-9][0-9])|(?:[0-9]))$/,
            message: '请输入正确的IP地址',
            trigger: 'blur'
          }
        ],
        port: [{ required: true, message: '端口不能为空', trigger: 'blur' }]
      }
    }
  },
  watch: {
    open: {
      handler(newValue) {
        this.isOpen = newValue
        this.refs.form.clearValidate()
      }
    }
  },
  methods: {
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // eslint-disable-next-line vue/no-mutating-props
          this.formData.connectInfo = `{"topic": "${this.formData.topic || ''}","groupId": ""}`
          // eslint-disable-next-line vue/no-mutating-props
          this.formData.sourceType = 'Kafka'
          if (this.title === '编辑') {
            updateSource({ dataSource: this.formData }).then((res) => {
              this.$modal.msgSuccess('修改成功')
              this.isOpen = false
              this.$emit('changeOpen', false)
            })
          } else {
            addSource({ dataSource: this.formData }).then((res) => {
              this.$modal.msgSuccess('新增成功')
              this.isOpen = false
              this.$emit('changeOpen', false)
            })
          }
        }
      })
    },
    // 取消按钮
    cancel() {
      this.isOpen = false
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-cascader {
  width: 100%;
}

.dialog-footer {
  width: 100% !important;
  display: block !important;
}

.el-form-item__label {
  width: 140px !important;
}

.el-form-item__content {
  margin-left: 140px !important;
}
::v-deep {
  .el-dialog:not(.is-fullscreen) {
    // height: 500px !important;
  }
  .el-dialog__body {
    // height: 77% !important;
  }
}
</style>
